昨天文末時 , 請 邦友 設定的 3 項屬性不知道各位做出來了嗎 ?

如果沒有 , 可以到 neuomorphic-button-05.js 這裡來參考作法

如果 邦友 有其他作法 , 歡迎大家到昨天的留言區 , 留言分享您的作法

事件分析

基礎的 HTML 按鈕 上有一個 onclick 事件 , 用來設定點擊後 , 要觸發哪一個函式

我們做的 neuomorphic-button 也是一個按鈕 , 當然我們需要有一個 點擊事件 , 讓引用元件的人 , 能註冊點擊後的處理函式

下面 , 我們就將 點擊事件 , 追加到 neuomorphic-button 元件上吧 !

常用的點擊事件

開始實作之前 , 我們來確認一下 , 在頁面中工程師常用那些手法設定 "click" 事件呢 ?

1. <button> 的 onclick 屬性

<button onclick="clickHandler()" />

2. EventTarget.addEventListener()

button.addEventListener('click', clickHandler )

也就是今天完成時 , 上方的 2 種事件 都可以在 neuomorphic-button 元件上使用

實作開始

將昨天的進度取出

class NeuomorphicButton extends HTMLElement {

  constructor() {

    super();

    const fontAwesomeStyle = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">`

    // neumorphism 產生器 : https://neumorphism.io/#e0e0e0
    const styleStr = `[neumorphism 按鈕樣式]`;

    const icon = this.getAttribute('icon') || 'fas fa-wifi'
    const size = this.getAttribute('size') || 70
    const color = this.getAttribute('color') || '#6a9bd8'
    const bgColor = this.getAttribute('bg-color') || '#ebf5fc'

    const htmlStr = `
        <label>
          <input type="checkbox" name="">
          <div class="icon-box" style="width: ${size}px;height: ${size}px;background-color:${bgColor}">
              <i class="${icon}" style="font-size: ${size * 0.6}px;color:${color}"></i>
          </div>
        </label>
    `

    this.attachShadow({mode: 'open'}).innerHTML = fontAwesomeStyle + styleStr + htmlStr
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

在 checkbox 加上 addEventListener 監聽 checkbox 的變化

const checkbox = label.querySelector('input[type="checkbox"]')
checkbox.addEventListener('change', function (e) {

  console.log('checkbox 被點到')
});

產生一個新的 Event 並將其 dispatch 到元素上

const self = this

const checkbox = label.querySelector('input[type="checkbox"]')
checkbox.addEventListener('change', function (e) {

  // detail 就是 CustomEvent 內的參數
  const clickEvent = new CustomEvent('check', {composed: true, detail: {check: this.checked}});
  self.dispatchEvent(clickEvent)
});

之後我們註冊 addEventListener('check' 到元素上 , 我們就可以看到事件的觸發

// 註冊範例 
document.querySelector('neuomorphic-button').addEventListener('check', e => console.log('註冊 & 監聽 check 事件 !!!', e.detail.check))

EventTarget.addEventListener() 的部分已解決 , 接下來處理 <button oncheck="checkHandler(e)" /> 的部分

處理 oncheck 屬性

const self = this
+ const oncheck = this.getAttribute('oncheck')

const checkbox = label.querySelector('input[type="checkbox"]')
checkbox.addEventListener('change', function (e) {

      ...之前的設定
      
+      eval(oncheck)
    });

之後我們註冊 oncheck="check(e)" 到元素上 , 我們就可以看到事件的觸發

// 註冊範例 
<neuomorphic-button icon="fas fa-lightbulb" oncheck="check(e)"></neuomorphic-button>

<script>
  function check(e) {
    console.log('oncheck 事件觸發 !!!', e)
  }
</script>

成果

如果想直接體驗成果 , 請到 web-component-addEventListener.html 查看

參考資料 :

• Udemy 課程 - Web Components & Stencil.js - Build Custom HTML Elements
• webcomponents 官方網站